<template>
    <div>
        <section>
            <el-form
                ref="form"
                :model="queryForm"
                label-width="61px"
                :inline="true"
                class="queryForm header-form adjustCondition"
            >
                <el-form-item label="关键字:">
                    <el-input
                        v-model="queryForm.keyWord"
                        size="small"
                        placeholder="请输入客户名称/业务编号查询"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="but-container">
                        <el-button
                            type="primary"
                            size="small"
                            style="margin-right:5px"
                            class="search-btn"
                            @click="
                getList(
                  1,
                  100,
                  page,
                  orderBy.name,
                  orderBy.method,
                  queryForm.keyWord,
                  queryForm.date
                )
              "
                        >查询
                        </el-button
                        >
                        <el-button size="small" @click="reset">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </section>
        <div>
            <!--      <el-button-->
            <!--        type="primary"-->
            <!--        size="small"-->
            <!--        @click="add"-->
            <!--      >调价-->
            <!--      </el-button-->
            <!--      >-->
        </div>
        <div>
            <section class="right-but" style="display:flex;margin-bottom:10px">
                <el-button type="text" style="margin-right:-13px;cursor:pointer;" @click="getList(
                  1,
                  100,
                  page,
                  orderBy.name,
                  orderBy.method,
                  queryForm.keyWord,
                  queryForm.date
                )">
                    <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
                </el-button>
                <PopoverBut :checkedProps="checkedProps" style="" :options="options"
                            @getCheckeds="handlerCloumn"></PopoverBut>

            </section>
        </div>
        <el-table
            size="mini"
            v-loading="loading"
            :data="tableData"
            style="width: 100%;"
            border
            :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
            :row-class-name="tableRowClassName"
        >
            <el-table-column type="index" label="序号" width="70" align="center">
                <template slot-scope="scope">
          <span>{{
                  (page.pageNo - 1) * page.pageSize + scope.$index + 1
              }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="codes" label="业务编号" min-width="210"></el-table-column>
            <el-table-column prop="dataType" label="数据类别" min-width="110">
                <template slot-scope="scope">
                    {{ $dictUtils.getDictLabel("dataType", scope.row.dataType, "") | noValue}}
                </template>
            </el-table-column>
            <el-table-column prop="modelName" label="业务类型" min-width="140"></el-table-column>
            <el-table-column prop="companyName" label="客户名称" min-width="200"></el-table-column>
            <el-table-column prop="productNames" label="产品名称" min-width="180"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="state" label="业务状态" sortable="custom" min-width="150px">
                <template slot-scope="scope">
                    <!--          {{scope.row.state}}-->
                    <div class="state normal" v-if=" scope.row.state === 100" type="success">
                        <span></span>{{ $dictUtils.getDictLabel("busState", scope.row.state, "") }}
                    </div>
                    <div class="state invalid" v-if=" scope.row.state === 101" type="warning">
                        <span></span>{{ $dictUtils.getDictLabel("busState", scope.row.state, "") }}
                    </div>
                </template>
            </el-table-column>

            <!--      <el-table-column prop="creditQuatity" label="创建人"></el-table-column>-->
            <span v-for="(item, index) in checkedProps" :key="index">
        <el-table-column prop="createDate" :label="item" min-width="200px" v-if="item==='创建时间'">
            <template slot-scope="scope">
                {{ scope.row.createDate | noValue }}
            </template>
        </el-table-column>
          <el-table-column prop="createBy.loginName" min-width="110px" :label="item" v-if="item==='创建人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.createBy">
                      <span v-if="scope.row.createBy.loginName">
                          {{ scope.row.createBy.loginName | noValue }}
                      </span>
                      <span v-else>--</span>
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="updateDate" :label="item" min-width="200px" v-if="item==='上次操作时间'">
              <template slot-scope="scope">
                  {{ scope.row.updateDate | noValue }}
              </template>
          </el-table-column>
          <el-table-column prop="updateBy.loginName" min-width="120px" :label="item" v-if="item==='上次操作人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.updateBy">
                      <span v-if="scope.row.updateBy.loginName">
                          {{ scope.row.updateBy.loginName | noValue }}
                      </span>
                      <span v-else>--</span>
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
      </span>

            <el-table-column prop="address" label="操作" width="160">
                <template slot-scope="scope">
                    <el-link type="primary" :underline="false" @click="edit(scope.row)"
                             v-if="hasPermission('busin:product:add')"
                    >调价
                    </el-link>
                    <el-link
                        type="primary"
                        :underline="false"
                        @click="openHistory(scope.row.id)"
                    >调价历史
                    </el-link
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="page.pageSize"
            :current-page="page.pageNo"
            layout="total,sizes,prev, pager, next, jumper"
            :total="page.total"
        >
        </el-pagination>
        <EditForm
            ref="EditForm"
            @refreshDataList="getList(1,100, page,orderBy.name, orderBy.method)"
        ></EditForm>
        <el-dialog
            title="调价历史"
            :visible.sync="innerVisible"
            class="tableDialog"
            append-to-body>
            <div class="detail">
                <table class="detail-table" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="label-container">业务编号</td>
                        <td class="form-container">{{ historyInfo.codes }}</td>
                        <td class="label-container">客户名称</td>
                        <td class="form-container">{{ historyInfo.companyName }}</td>
                    </tr>
                    <!--<tr>
                      <td class="label-container">产品类型</td>
                      <td class="form-container">{{historyInfo.categoryName}}</td>
                      <td class="label-container">产品名称</td>
                      <td class="form-container">{{historyInfo.productName}}</td>
                    </tr>-->
                </table>
            </div>
            <div class="columnLayout container">
                <section class="left-container">
                    <h5>货物</h5>
                    <el-menu
                        default-active="0"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose">
                        <el-menu-item :index="(index+'')" v-for="(item,index) in this.menus" :key="index">
                            <span @click="getHistoryList(item.value)">{{ item.label }}</span>
                        </el-menu-item>
                    </el-menu>
                </section>
                <section class="right-container">
                    <div>
                        <el-table
                            size="mini"
                            v-loading="loading"
                            :data="historyData"
                            style="width: 100%; margin-top: 10px"
                            border
                            :header-cell-style="{
        'background-color': '#eeeeee !important',
      }">


                            <el-table-column type="index" label="序号" width="60" align="center">
                                <template slot-scope="scope">
          <span>{{
                  (page.pageNo - 1) * page.pageSize + scope.$index + 1
              }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="支付方式"
                                prop="payMode"
                                :show-overflow-tooltip="true"
                            >
                                <template slot-scope="scope">
                                    {{ $dictUtils.getDictLabel("payMode", scope.row.payMode, "") }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="执行单价"
                                prop="price"
                                align="right"
                                :show-overflow-tooltip="true">

                                <template slot-scope="scope">
                                    {{ scope.row.price }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="单价"
                                prop="displayPrice"
                                align="right"
                                :show-overflow-tooltip="true"
                            >
                                <template slot-scope="scope">
                                    {{ scope.row.displayPrice }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="含运费"
                                prop="isFreightBoolean"
                                :show-overflow-tooltip="true"
                            >
                                <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.isFreightBoolean"
                                                 disabled>
                                        <!--              {{scope.row.isFreightBoolean?'包含':'不包含'}}-->
                                    </el-checkbox>
                                </template>

                            </el-table-column>
                            <el-table-column
                                label="执行时间"
                                prop="effectTime"
                                :show-overflow-tooltip="true"
                                width="160px"
                            >
                            </el-table-column>
                            <span>
        <el-table-column prop="state" label="状态" sortable="custom" width="160">
          <template slot-scope="scope">
            <div v-if="JSON.stringify(scope.row.flowState)==='{}'">
              <div class="state invalid"
                   v-if=" scope.row.state === -1 || scope.row.state === 4"><span></span>{{
                      $dictUtils.getDictLabel("busState", scope.row.state, "")
                  }}</div>
              <div class="state empty"
                   v-if=" scope.row.state === 1 || scope.row.state === 3"><span></span>{{
                      $dictUtils.getDictLabel("busState", scope.row.state, "")
                  }}</div>
              <div class="state process"
                   v-if=" scope.row.state === 2"><span></span>{{
                      $dictUtils.getDictLabel("busState", scope.row.state, "")
                  }}</div>
              <div class="state normal"
                   v-if=" scope.row.state === 100"><span></span>{{
                      $dictUtils.getDictLabel("busState", scope.row.state, "")
                  }}</div>
            </div>
            <div v-else>
               <div class="state process" v-if="scope.row.flowState.code === 0
                 || scope.row.flowState.code === 3
                 || scope.row.flowState.code === 4
                 || scope.row.flowState.code === 5"><span></span>{{ scope.row.flowState.status }}</div>
            <span v-if="scope.row.flowState.deleteReason"></span>
            <div class="state process" v-if="scope.row.flowState.code === 2"
            ><span></span>{{ scope.row.flowState.status }}  [{{ scope.row.flowState.currentTask.name }}]</div>
            <div class="state process"
                 v-if="scope.row.flowState.code === 100"><span></span>{{ scope.row.flowState.status }}</div>
            </div>
          </template>
        </el-table-column>
      </span>
                        </el-table>
                    </div>
                </section>
            </div>

        </el-dialog>
    </div>
</template>
<script>
    import {getProductIndexList, getBusinessList, getHistoryList} from '@/api/business/business.js'
    import EditForm from './editForm'
    import PopoverBut from '@/components/button/popoverBut'

    const options1 = []
    const cityOptions = ['上海', '北京']
    export default {
        components: {
            EditForm,
            PopoverBut
        },

        data() {
            return {
                innerVisible: false,
                historyInfo: {},
                historyData: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit('pick', [start, end])
                        }
                    }]
                },
                handleOpen(key, keyPath) {
                    console.log(key, keyPath)
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath)
                },
                checkedProps: options1,
                ShowCloum: {createDate: ''},
                options: [
                    {label: "创建人", key: "createBy.loginName"},
                    {label: "创建时间", key: "createDate"},
                    {label: "上次操作人", key: "updateBy.loginName"},
                    {label: "上次操作时间", key: "updateDate"},
                ],
                tableData: [],
                orderBy: {
                    name: 'update_date',
                    method: 'desc'
                },
                loading: false,
                page: {
                    pageSize: 10,
                    pageNo: 1,
                    total: 0
                },
                props: 1,
                menus: [],
                productId: '',
                businessId: '',
                queryForm: {
                    checkedCities: 0
                },
                checkedCities: [],
                cities: cityOptions
            }
        },
        methods: {
            // 左侧货物列表
            getProductIndexList (businessId) {
                this.businessId = businessId
                getProductIndexList({businessId: businessId}).then((res) => {
                    if (res.data.code === '200') {
                        if (res.data.result.length > 0) {
                            this.menus = res.data.result;
                            console.log(this.menus)
                            this.productId = this.menus[0].value
                            console.log(this.menus[0].value)
                            console.log(this.productId)
                            this.getHistoryList(this.productId)
                        }
                    }
                })
            },
            // 调价历史dialog
            openHistory(businessId) {
                this.innerVisible = true
                this.businessId = businessId
                this.getProductIndexList(businessId)
                // this.getHistoryList(this.productId)
            },
            // 获取列表带分页
            getList(processType, state, params, orderName, orderByAORC, keyWord, date) {
                this.loading = true
                getBusinessList({
                    processType: processType,
                    businessProductFlag: state,
                    pageSize: params.pageSize,
                    pageNo: params.pageNo,
                    orderBy: orderName,
                    orderByAORC: orderByAORC,
                    keyWord: keyWord
                }).then((res) => {
                    if (res.data.code === '200') {
                        this.tableData = res.data.result.list
                        this.page.total = res.data.result.count
                    }
                    this.loading = false
                })
            },
            // 获取列表带分页
            getHistoryList(productId) {
                this.loading = true
                getHistoryList({
                    businessId: this.businessId,
                    productId: productId
                }).then((res) => {

                    if (res.data.code === '200') {
                        for (let i = 0; i < res.data.result.businessProductList.length; i++) {
                            if (!res.data.result.businessProductList[i].flowState) {
                                let flowState = {}
                                this.$set(res.data.result.businessProductList[i], 'flowState', flowState)
                            }
                        }
                        this.historyInfo = res.data.result
                        this.historyData = res.data.result.businessProductList
                    }
                    this.loading = false
                })
            },
            // 编辑
            edit(row) {
                let editForm = {}

                // editForm.businessProductId = row.id
                editForm.selectVos = row.selectVos
                console.log(1111)
                console.log(editForm.selectVos)
                editForm.companyName = row.companyName
                editForm.price = row.price
                editForm.businessId = row.id
                editForm.productName = row.productName
                editForm.codes = row.codes
                editForm.effectTime = row.effectTime
                console.log(row)
                this.$refs.EditForm.init(editForm)
            },
            // 是否显示某列数据
            handlerCloumn(e) {
                this.checkedProps = e
                // console.log(e)
            },
            // 重置查询条件
            reset() {
                this.queryForm = {}
                this.getList(1, 100, this.page, this.orderBy.name, this.orderBy.method)
            },
            // 排序
            sortthiscolumn(a) {
                this.orderBy.name = a.prop
                this.page.pageNo = 1
                if (a.order === 'ascending') {
                    this.orderBy.method = 'asc'
                } else {
                    this.orderBy.method = 'desc'
                }
                this.getList(1, 100, this.page, this.orderBy.name, this.orderBy.method)
            },
            handleSizeChange(e) {
                this.page.pageSize = e
                this.getList(this.page, 'names', 'asc')
            },
            handleCurrentChange(e) {
                this.page.pageNo = e
                this.getList(this.page, 'names', 'asc')
                console.log(e)
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'warning-row'
                } else {
                    return 'success-row'
                }
            }
        },
        mounted() {
            this.getList(1, 100, this.page, this.orderBy.name, this.orderBy.method)
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep .el-input--small .el-input__inner {
        height: 36px;
        line-height: 32px;
        width: 230px;
    }

    .queryForm {
        position: relative;

        .but-container {
            top: 10px;
        }

        .el-form-item {
            margin-bottom: 0;
        }
    }

    .right-but {
        float: right;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    ::v-deep .el-dialog .el-table {
        border: 1px solid #DDDDDD;

        td, th.is-leaf {
            border-bottom: none;
        }

    }

    ::v-deep .el-table--border td, ::v-deep .el-table--border th, ::v-deep .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
        border-right: 1px solid #DDDDDD;
    }

</style>
